<template>
  <div>
    <!-- <headerTop></headerTop> -->
    <!-- 头部 搜索 -->
    <div class="head">

      <!-- 图标 -->
      <div class="img"> <img src="../assets/log-png.png" alt=""></div>
      <!-- 搜索框 -->
      <div class="input">
        <el-input v-model="input" style=" color: rgb(172, 170, 170); width: 314px;" placeholder="请输入内容"></el-input>
        <el-button style="height: 40px;" type="primary" @click="ToSearch">搜索</el-button>
        <div class="wenzi" v-for="(item, index) in shoppingList.slice(0, 5)">
          <span @click="getText(item.name)">{{ item.name }}</span>
        </div>
      </div>
      <!-- 购物车 -->

      <div class="gwc" @click="toShopping">
        <div> <img src="../assets/cat.png" style="width: 80px;"></div>
        <div style="margin-top: 25px;">我的购物车</div>
      </div>

      <div class="heade">
        <el-dropdown class="dropdown">
          <!-- <div class="user-img box">
        <el-avatar v-if="this.userid == 0"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-avatar v-else :src="image"></el-avatar>
      </div> -->
          <i class="el-icon-user" style="font-size: 28px;"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toLogin" v-if="userId == 0">登录</el-dropdown-item>
            <el-dropdown-item @click.native="Personal"> 个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="LoginOut" v-if="userId != 0">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 详情轮播图 -->
    <div class="center">
      <div class="center_item">

        <div class="left" style="position: relative;">
          <!-- 左边列表 -->
          <div>
            <div
              style="text-align: center;font-size: 18px;height: 50px; line-height: 50px; background-color: rgb(176, 177, 177);">
              生鲜分类
            </div>
            <div class="category" v-for="(item, index) in categoryList">
              <p>{{ item.classname }} ></p>
            </div>
          </div>
        </div>


        <!-- 轮播图 -->
        <div style="border: 1px solid black;">
          <div class="block">
            <el-carousel height="350px">
              <el-carousel-item v-for="item in imgs">
                <img :src="item.img" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容 -->

    <div class="content_head">
      <div class="content_head_inner">
        <h3 class="content_head_title"><i>F</i><i>r</i><i>e</i><i>s</i><i>h</i><i>生</i><i>鲜</i></h3>
        <p class="content_head_subtitle">FRESH</p>
      </div>
    </div>


    <div class="content">
      <div class="content_img">
        <div class="img1">
          <h4>"新鲜水果"</h4>
          <p>应时而采，新鲜特供</p>
        </div>
        <div class="img2"></div>
        <div class="img3"></div>
      </div>
      <!-- 卡片 -->
      <div class="card" v-for="(item, index) in shoppingList" v-if="item.categoryId == 1">
        <div class="card_list">
          <ul style="list-style: none;">
            <li class="clickable" @click="toDetail(item)">

              <div class="card_item">
                <img :src="item.img" alt="">
                <p style="text-align: left; margin: 5px 15px;">{{ item.name }}</p>
                <p style="text-align: left; margin: 5px 15px;">{{ item.productDescription }}</p>
              </div>
              <div class="bt"></div>
            </li>


          </ul>
        </div>
      </div>

    </div>

    <!-- 海鲜栏 -->
    <div class="content_h">
      <div class="content_img_h">
        <div class="img1_h">
          <h4>"海鲜水产"</h4>
          <p>新鲜海货，即时享受</p>
        </div>
        <div class="img2_h"></div>
        <div class="img3_h"></div>
      </div>
      <!-- 卡片 -->
      <div class="card" v-for="(item, index) in shoppingList" v-if="item.categoryId == 2">
        <div class="card_list">
          <ul style="list-style: none;">
            <li class="clickable" @click="toDetail(item)">

              <div class="card_item">
                <img :src="item.img" alt="">
                <p style="text-align: left; margin: 5px 15px;">{{ item.name }}</p>
                <p style="text-align: left; margin: 5px 15px;">{{ item.productDescription }}</p>
              </div>
              <div class="bt"></div>
            </li>

          </ul>
        </div>
      </div>

    </div>

    <!-- 蛋肉栏 -->
    <div class="content_r">
      <div class="content_img_r">
        <div class="img1_r">
          <h4>"蔬菜单品"</h4>
          <p>肉香四溢，大快朵颐</p>
        </div>
        <div class="img2_r"></div>
        <div class="img3_r"></div>
      </div>
      <!-- 卡片 -->
      <div class="card" v-for="(item, index) in shoppingList" v-if="item.categoryId == 3">
        <div class="card_list">
          <ul style="list-style: none;">
            <li class="clickable" @click="toDetail(item)">

              <div class="card_item">
                <img :src="item.img" alt="">
                <p style="text-align: left; margin: 5px 15px;">{{ item.name }}</p>
                <p style="text-align: left; margin: 5px 15px;">{{ item.productDescription }}</p>
              </div>
              <div class="bt"></div>
            </li>

          </ul>
        </div>
      </div>

    </div>
    <div class="footer">
      <fresh_foote></fresh_foote>
    </div>

  </div>
</template>

<script>
import headerTop from '@/components/headerTop.vue';
import fresh_foote from '@/components/fresh_foote.vue';
import { getCommodity } from '@/api/commodity'
import { getUserMessage } from '@/js/usermessage'
import { getCategory } from '@/api/category';
export default {
  components: {
    headerTop,
    fresh_foote
  },
  data() {
    return {
      input: '',
      shoppingList: [],
      userId: 0,
      categoryList: [],
      classificationId: 0,
      categoryArr: [],
      data: [],
      imgs: [
        { id: 0, img: 'https://m.360buyimg.com/babel/jfs/t20261011/131631/4/40025/129320/6527bdedF8c958d25/814ee4169a74986a.jpg' },
        { id: 1, img: 'https://m.360buyimg.com/babel/jfs/t20261010/114756/2/40058/74788/65269285Fd3689e18/d098e9d96b4cd9db.png' },
        { id: 2, img: 'https://m.360buyimg.com/babel/jfs/t20261008/167098/9/41430/153136/6524118cF4d1b90fc/48afe40dbbde03c0.jpg' },
        { id: 3, img: 'https://m.360buyimg.com/babel/jfs/t20261011/102198/26/40662/142278/65278bc8F8cc210cd/722941c18cfc3296.jpg' },
      ]
    }

  },
  created() {
    // this.getUserMessage()
    this.getCommodityList()
    getUserMessage()
    this.Category()
    this.getUserId()
  },
  mounted() {
    this.$nextTick(() => {
      this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
      });
    })
  },
  methods: {
    toLogin() {
      this.$router.push('/login')
    },


    //退出登录
    LoginOut() {
      localStorage.removeItem("user")
      this.$router.push("/login")
      this.$notify.success("退出成功！")
    },

    getUserid() {
      this.userId = getUserMessage(this.userId)
    },

    Personal() {
      this.$router.push({
        query: {
          userId: this.userId
        },
        path: "/Personal"
      })
    },
    toShopping() {
      this.$router.push({
        query: {
          id: this.userId
        },
        path: 'shopping'
      })
    },

    //获取全部商品
    getCommodityList() {
      getCommodity().then(res => {
        this.shoppingList = res.data
        var index = this.shoppingList.length
        var random = Math.floor(Math.random() * index)
        this.input = res.data[random].name
        this.shoppingList.sort(function () {
          return Math.random() - 0.5
        })
      })
    },

    toDetail(item) {
      // let id = item.categoryId
      this.$router.push({
        query: {
          id: item.commodityId,
          img: item.img,
          name: item.name,
          price: item.price,
          productDescription: item.productDescription,
          userId: this.userId
        },
        path: '/detail'
      })
    },

    Category() {
      getCategory().then(res => {
        this.categoryList = res.data
        // this.classificationId = res.data[0].classificationId
        // console.log(res)
      })
    },

    getUserId() {
      this.userId = getUserMessage(this.userId)
    },

    // 搜索
    ToSearch() {
      var value = this.input
      if (value == "") {
        this.$message.error("请输入内容！")
      } else {
        this.$router.push({
          query: {
            word: value
          },
          path: 'search'
        })
      }

    },

    // 获取文字
    getText(value) {
      this.input = value
    },

  }
}
</script> 

<style scoped>
.head {
  width: 1200px;
  height: 90px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
  margin-bottom: 40px;
}

.head .img {
  float: left;
}

.input {
  margin-left: 125px;
}

.head .img img {
  width: 140px;
  height: 100px;
}

/* 购物车 */
.gwc {
  display: flex;
  color: #0a0a0a;
  margin-right: -30px;
  margin-top: -21px;
  width: 170px;
  height: 70px;

}

.gwc:hover {
  cursor: pointer;
  box-shadow: 2px 2px 2px #ddd7d7;
}

a {
  text-decoration: none;
}

/* 文字 */
.wenzi {
  text-align: left;
  color: rgb(172, 170, 170);
  font-size: 12px;
}

.wenzi span {
  margin-right: 12px;
  float: left;
}

.wenzi span:hover {
  color: black;
  cursor: pointer
}

/* 轮播图区域 */
.center {
  width: 100%;
  height: 400px;
  position: relative;
  background-image: url(//img11.360buyimg.com/cms/jfs/t9016/320/246907648/570978/346ecda1/59a3d65eNd604759b.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.center .left {
  text-align: left;
  flex-grow: 1;
  flex-basis: auto;
}

.category p {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 16px;
}

.category p:hover {
  background-color: rgb(152, 227, 156);
  cursor: pointer;
}

.center_item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: aliceblue;
  width: 1040px;
  height: 350px;
  display: flex;
  box-shadow: 0 0 22px rgba(182, 182, 188);

}

.center_img div {
  flex-grow: 1;
  flex-basis: auto;
}

.block {
  width: 850px;
  flex-grow: 1;
}

.block img {
  width: 850px;
  height: 468px;
}

/* 内容 */
.content_head {
  height: 60px;
  background: url(../assets/content_head.png) no-repeat center;
}

.content_head_inner {
  margin: 0 auto;
  width: 284px;
  text-align: center;
}

.content_head_title {
  height: 17px;
  margin-bottom: 30px;
  line-height: 42px;
}

.content_head_title i {
  margin: 0 10px;
  color: #222;
  font-size: 28px;
}

.content_head_subtitle {
  height: 21px;
  font-size: 14px;
  color: #222;
  font-weight: 400;
}

.content {
  width: 1200px;
  margin: 70px auto;
  overflow: hidden;
}


.content_img {
  display: flex;
}

.content_img .img1 {
  background: url(../assets/bj.png) no-repeat;
  padding: 0 20px;
  width: 160px;
  height: 300px;
}

.content_img .img1 h4 {
  font-size: 26px;
  height: 15px;
  text-align: left;
  color: #fff;

}

.content_img .img1 p {
  font-size: 16px;
  text-align: left;
  color: #fff;

}

.content_img .img2 {
  background: url(../assets/ll.jpg) no-repeat;
  background-size: cover;
  width: 600px;
  height: 300px;
}

.content_img .img3 {
  background: url(../assets/sl.png) no-repeat;
  background-size: cover;
  width: 430px;
  height: 300px;
}


/* 卡片 */
.card {
  margin-left: -30px;

}

.card .card_list {
  height: auto;
}

.card_list .clickable {
  width: 208px;
  height: 300px;
  float: left;
  position: relative;
  margin-left: 20px;
  margin-top: 30px;
  /* background-color: #eff0f0; */

}



.card_list .clickable .card_item img {
  width: 180px;
  height: 180px;
  margin-top: 10px;
}

.card_list .clickable:hover .card_item img {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.card_list .clickable:hover .card_item p {
  color: #00c65d;
}

.card_list .clickable:hover {
  cursor: pointer;
  /* box-shadow: 2px 2px 2px #ddd7d7; */
  box-shadow: 0 -2px #dedada, 2px 0 #dedada, 0 2px #dedada, -2px 0 #dedada;
}

.clickable .bt {
  width: 0px;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(103.89deg, #41e9ca -31.48%, #25bb68 53.11%, #beec3d 128.5%);
  position: absolute;
  transition: .3s;

}

.clickable:hover .bt {
  width: 100%;
  height: 2px;
}


.heade {
  /* position: absolute; */
  width: 50px;
  height: auto;
  padding-bottom: 19px;
}

.heade .dropdown {
  margin: 0 auto;
  float: right;
}

/* 海鲜栏 */
.content_h {
  width: 1200px;
  margin: 70px auto;
  overflow: hidden;
}


.content_img_h {
  display: flex;
}

.content_img_h .img1_h {
  background: url(../assets/h1.png) no-repeat;
  padding: 0 20px;
  width: 160px;
  height: 300px;
}

.content_img_h .img1_h h4 {
  font-size: 26px;
  height: 15px;
  text-align: left;
  color: #fff;

}

.content_img_h .img1_h p {
  font-size: 16px;
  text-align: left;
  color: #fff;

}

.content_img_h .img2_h {
  background: url(../assets/h2.png) no-repeat;
  background-size: cover;
  width: 600px;
  height: 300px;
}

.content_img_h .img3_h {
  background: url(../assets/h3.png) no-repeat;
  background-size: cover;
  width: 430px;
  height: 300px;
}

/* 蛋肉栏 */
.content_r {
  width: 1200px;
  margin: 70px auto;
  overflow: hidden;
}


.content_img_r {
  display: flex;
}

.content_img_r .img1_r {
  background: url(../assets/r1.png) no-repeat;
  padding: 0 20px;
  width: 160px;
  height: 300px;
}

.content_img_r .img1_r h4 {
  font-size: 26px;
  height: 15px;
  text-align: left;
  color: #fff;

}

.content_img_r .img1_r p {
  font-size: 16px;
  text-align: left;
  color: #fff;

}

.content_img_r .img2_r {
  background: url(../assets/r2.png) no-repeat;
  background-size: cover;
  width: 600px;
  height: 300px;
}

.content_img_r .img3_r {
  background: url(../assets/r3.png) no-repeat;
  background-size: cover;
  width: 430px;
  height: 300px;
}

.footer {
  margin: 0 auto;
  width: 1200px;
  height: auto;
}
</style>